<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no">
	<title>vue+boostrap最佳实践1-输入框</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="main">
	<div style="margin-top: 15px;margin-left: 150px" class="btn btn-default" type="button">
		<div v-on:click="toggle" class=" glyphicon glyphicon-search"></div>
	</div>
	<div v-show="status" style="margin-top: 10px;" class="input-group">
		<div class="input-group-addon">输入框</div>
		<input v-model="inp" type="text" class="form-control">
	</div>
	<p>{{inp}}</p>
</div>

<script src="js/vue.js"></script>
<script type="text/javascript">
window.onload=function(){
	var demo = new Vue({
			el:'#main',
			data:{
			inp:"",
			status:false
		},
		methods:{
			toggle:function(){
				this.status=!this.status;
			}
		}
		});
	}

</script>
</body>
</html>